import React, { FC, useCallback, useEffect } from 'react'
import { View, Text, Image, StatusBar, TouchableHighlight, SafeAreaView } from 'react-native'
import { createBottomTabNavigator } from '@react-navigation/bottom-tabs'
import { useNavigation } from '@react-navigation/native'
// import { BlurView } from 'expo-blur'

import Cookbook from './cookbook/CookBook'
import Category from './category/Category'
import More from './more/More'

import TabbarIcon from './TabbarIcon'

import store from '../../store/title'

// interface Props {
//   title: string
// }

type Props = {
  title: string,
  navigation?: any
}

const Tab = createBottomTabNavigator()

const Home:FC<Props> = () => {
  const navigation = useNavigation()

  useEffect(() => {
    const unsubscribe = navigation.addListener('state', (e) => {
      const arr = ['美食大全', '分类', '更多']
      const title = arr[e.data.state.routes[0].state?.index || 0]
      navigation.setOptions({
        title
      })
    })
    return unsubscribe
  }, [navigation])

  return (
    <>
      <StatusBar
        barStyle="light-content"
      />
      <Tab.Navigator
        initialRouteName="Cookbook"
        screenOptions={{
          tabBarActiveTintColor: '#000',
          tabBarInactiveTintColor: '#666',
          tabBarStyle: {
            backgroundColor: 'snow'
          },
          header: () => null
        }}
        >
        <Tab.Screen 
          name="Cookbook" 
          component={Cookbook}
          options={{
            title: '美食大全',
            tabBarIcon: ({focused}) => (
              <TabbarIcon
                focused={focused}
                activeIcon={require("../../assets/images/cookbook-active.png")}
                icon={require("../../assets/images/cookbook.png")}
              ></TabbarIcon>
            )
          }}
        />
        <Tab.Screen
          name="Category"
          component={Category}
          options={{
            title: '分类',
            tabBarIcon: ({focused}) => (
              <TabbarIcon
                focused={focused}
                activeIcon={require("../../assets/images/menu-active.png")}
                icon={require("../../assets/images/menu.png")}
              ></TabbarIcon>
            )
          }}
        />
        <Tab.Screen 
          name="More" 
          component={More}
          options={{
            title: '更多',
            tabBarIcon: ({focused}) => (
              <TabbarIcon
                focused={focused}
                activeIcon={require("../../assets/images/more-active.png")}
                icon={require("../../assets/images/more.png")}
              ></TabbarIcon>
            )
          }}
        />
      </Tab.Navigator>
    </>
  )
}

export default Home